<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<p>{{info.split('').reverse().join('')}}</p>
		<p>这是计算属性返回:{{reverseMsg}}</p>
		<p>这是计算属性返回:{{reverseMsg}}</p>
		<p>这是计算属性返回:{{reverseMsg}}</p>
		<p>这是函数属性：{{k()}}</p>
	</div>
	<script src="./vue.js"></script>
	
	<script>
		/*
		计算属性：
     		属性名：函数名
		    属性值：函数的返回值
			计算属性依赖于普通属性(data中的数据)计算属性也会被挂载到当前实力上,可以使用{{}}语法

			函数与计算属性的区别
			  1、用函数去实现，每次得到返回结果都会执行函数，计算属性只会执行一次，然后把结果存在缓存中，以后使用会从缓存中直接获取，不在执行逻辑，提高性能
		*/
		var vm = new Vue({ //选项对象
			el:'#app',
			data:{//数据  普通属性
				info:'holle'
			},
			methods: {  //方法
            k : function () {
                console.log("函数执行");
                return this.info.split('').reverse().join('');
            }
          },
			computed: {   //计算属性
            reverseMsg: function () {
                console.log("计算属性执行");
                return this.info.split('').reverse().join('');
            }
        }
		})
	</script>
</body>
</html>